<template>
  <view
    class="forum-card"
    @click="onCardClick"
  >
    <!-- 用户信息区 -->
    <view class="user-info">
      <image
        class="avatar"
        :src="info.user.avatar"
      />
      <view class="user-meta">
        <view class="nickname">{{ info.user.nickname }}</view>
        <view class="signature">{{ info.user.signature }}</view>
      </view>
    </view>
    <!-- 文章内容区 -->
    <view class="post-content">
      <view class="title">{{ info.title }}</view>
      <view class="content-wrap">
        <text
          class="content"
          :class="{ ellipsis: !showAll && showExpandBtn }"
        >
          {{ info.content }}
        </text>
        <block v-if="showExpandBtn">
          <text
            v-if="!showAll"
            class="expand-btn"
            @click.stop="showAll = true"
            >全文</text
          >
          <text
            v-else
            class="expand-btn"
            @click.stop="showAll = false"
            >收起</text
          >
        </block>
      </view>
    </view>
    <!-- 图片区 -->
    <view class="image-list">
      <ImageUploader
        :value="info.images"
        :readonly="true"
      />
    </view>
    <!-- 分割线 -->
    <view class="divider"></view>
    <!-- 底部区域 -->
    <view class="card-footer">
      <view class="footer-left">
        <view class="like-avatars">
          <block
            v-for="(avatar, idx) in displayAvatars"
            :key="idx"
          >
            <image
              class="like-avatar"
              :src="avatar"
              :style="{ left: `${idx * 20}rpx` }"
            />
          </block>
        </view>
        <text
          class="like-count"
          :style="{ marginLeft: setMarginLeft() }"
        >
          {{ likeAvatars.length }}人表达了态度
        </text>
      </view>
      <view class="footer-right">
        <view class="footer-icon-group">
          <view class="footer-icon-item">
            <image
              class="footer-icon"
              src="/static/icon/share_icon.png"
            />
            <text class="footer-icon-text">{{ info.shareCount }}</text>
          </view>
          <view class="footer-icon-item">
            <image
              class="footer-icon"
              src="/static/icon/comment_icon.png"
            />
            <text class="footer-icon-text">{{ info.commentCount }}</text>
          </view>
          <view class="footer-icon-item">
            <image
              class="footer-icon"
              src="/static/icon/like_icon.png"
            />
            <text class="footer-icon-text">{{ info.likeCount }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import ImageUploader from '@/components/ImageUploader.vue'
  export default {
    name: 'ForumCard',
    components: { ImageUploader },
    props: {
      info: {
        type: Object,
        required: true
      },
      likeAvatars: {
        type: Array,
        default: () => []
      },
      showExpandBtn: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        showAll: false
      }
    },
    computed: {
      displayAvatars() {
        return this.likeAvatars.slice(0, 3)
      }
    },
    methods: {
      setMarginLeft() {
        const map = {
          1: '30rpx',
          2: '48rpx',
          3: '68rpx'
        }
        return map[this.displayAvatars.length] || '0'
      },
      onCardClick() {
        console.log('this.info: ', this.info)
        this.$emit('click', this.info)
      }
    }
  }
</script>

<style scoped lang="scss">
  .forum-card {
    background: #fff;
    padding: 0;
    border-top: solid 1rpx #f5f5f5;
    border-bottom: solid 1rpx #f5f5f5;
    margin-bottom: 16rpx;
  }
  .user-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 32rpx 32rpx 0 32rpx;
  }
  .avatar {
    width: 91rpx;
    height: 91rpx;
    border-radius: 50%;
    margin-right: 32rpx;
    background: #eee;
  }
  .user-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .nickname {
    color: #333;
    font-size: 36rpx;
    font-weight: 600;
  }
  .signature {
    color: #999;
    font-size: 24rpx;
    margin-top: 8rpx;
  }
  .post-content {
    padding: 24rpx 32rpx 0 32rpx;
  }
  .title {
    color: #000;
    font-size: 32rpx;
    font-weight: 500;
    margin-bottom: 12rpx;
  }
  .content-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .content {
    color: #666;
    font-size: 28rpx;
    flex: 1;
    transition: all 0.2s;
  }
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .expand-btn {
    color: #1aad19;
    font-size: 28rpx;
    margin-left: 12rpx;
    cursor: pointer;
  }
  .image-list {
    padding: 24rpx 32rpx 0 32rpx;
  }
  .divider {
    height: 1rpx;
    background: #eaeaea;
    margin: 45rpx 32rpx 0 32rpx;
  }
  .card-footer {
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32rpx;
    color: #666;
    font-size: 28rpx;
  }
  .footer-left {
    display: flex;
    align-items: center;
  }
  .like-avatars {
    position: relative;
    height: 36rpx;
    margin-right: 16rpx;
  }
  .like-avatar {
    width: 36rpx;
    height: 36rpx;
    border-radius: 50%;
    border: 2rpx solid #fff;
    position: absolute;
    top: 0;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
    background: #eee;
  }
  .like-count {
    color: #666;
    font-size: 28rpx;
  }
  .footer-right {
    display: flex;
    align-items: center;
  }
  .footer-icon-group {
    display: flex;
    align-items: center;
  }
  .footer-icon-item {
    display: flex;
    align-items: center;
    margin-left: 20rpx;
  }
  .footer-icon-item:first-child {
    margin-left: 0;
  }
  .footer-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 8rpx;
  }
  .footer-icon-text {
    color: #666;
    font-size: 28rpx;
  }
</style>
